<template>
  <div class="app-container">
    <van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
    <div class="content-box" v-loading="dataLoading">
      <van-tabs v-model="active">
        <van-tab title="慰问品详情">
          <div class="tab-content">
            <img class="banner" :src="collectData.imageUrl" alt="">
            <div class="content-item-box">
              <div class="item-title">{{ collectData.activityName }}</div>
              <div class="content-box">
                <!-- <img class="introduce-img" :src="require('@/assets/images/condolenceDistribution/introduce.png')" alt=""> -->
                <div class="tip description">{{ collectData.description }}</div>
                <div class="tip">
                  <span class="label">规格：</span>{{ collectData.specification }}
                </div>
                <div class="tip">
                  <span class="label">领取时间：</span>
                  {{ dayjs(collectData.startTime).format('YYYY年MM月DD日') }}
                  —
                  {{ dayjs(collectData.endTime).format('YYYY年MM月DD日') }}
                </div>
              </div>
            </div>
            <div class="content-item-box">
              <div class="item-title">慰问品详情</div>
              <div class="item-list-box">
                <el-table ref="tableRef" :data="tableData" :show-header="false">
                  <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop"
                    :class-name="item.className" :width="item.width" :min-width="item.minWidth"
                    :sortable="item.sortable" :align="item.align || 'left'"
                    :show-overflow-tooltip="item.showOverflowTooltip" :fixed="item.fixed" :resizable="false">
                    <template slot-scope="{row}">
                      <!-- 封面 -->
                      <el-image v-if="item.prop == 'giftImageUrl'" class="image" :src="row.giftImageUrl"
                        :preview-src-list="[row.giftImageUrl]" alt="封面" />
                      <!-- 默认 -->
                      <span v-else>{{ row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <div class="item-box" v-for="(item, index) in itemList" :key="index">
                  <div class="item-info">
                    <span class="name">{{ item.optionName }}</span>
                  </div>
                  <span class="price" v-if="item.price">￥{{ item.price }}</span>
                </div> -->
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="领取方式">
          <div class="tab-content">
            <div class="type-box">
              <div class="type-item" :class="{ active: !addressForm.isMailed, isRecord: isRecord }"
                @click="() => addressForm.isMailed = 0">
                单位领取
              </div>
              <div class="type-item" :class="{ active: addressForm.isMailed, isRecord: isRecord }"
                @click="() => addressForm.isMailed = 1">
                快递邮寄
              </div>
            </div>
            <!-- <div class="search-box">
              <el-input v-model="searchForm.address" placeholder="搜索地址，更快填写" />
              <div class="tip">*内蒙古、新疆地区暂不支持邮寄</div>
            </div> -->
            <div class="form-box">
              <el-scrollbar>
                <el-form ref="addressFormRef" class="address-form" :model="addressForm" :rules="addressFormRules"
                  label-position="top">
                  <el-form-item label="慰问品选项" prop="optionId">
                    <el-select v-model="addressForm.optionId" filterable placeholder="请选择慰问品" :disabled="isRecord">
                      <el-option :label="item.optionName" :value="item.optionId" v-for="(item, index) in tableData"
                        :key="index" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="城市或地区" prop="area" v-if="addressForm.isMailed">
                    <el-select v-model="addressForm.area" filterable placeholder="请选择城市或地区" :disabled="isRecord">
                      <el-option :label="item" :value="item" v-for="(item, index) in cityList" :key="index" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="详细地址和门牌号" prop="contactAddress" v-if="addressForm.isMailed">
                    <el-input v-model="addressForm.contactAddress" placeholder="请输入详细地址和门牌号" :disabled="isRecord" />
                  </el-form-item>
                  <el-form-item label="领取人姓名" prop="recipient">
                    <el-input v-model="addressForm.recipient" placeholder="请输入领取人姓名" :disabled="isRecord" />
                  </el-form-item>
                  <el-form-item label="手机号码" prop="contactInfo">
                    <el-input v-model="addressForm.contactInfo" placeholder="请输入手机号码" :disabled="isRecord" />
                  </el-form-item>
                </el-form>
              </el-scrollbar>
            </div>
            <div class="handle-box" v-if="!isRecord">
              <div class="btn" @click="submit">提交</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/condolenceManger/index.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';

export default {
  name: 'CondolenceDistributionDetail',
  data() {
    return {
      dataLoading: false,
      collectId: null,
      collectData: {},
      active: '',
      isRecord: false,
      tableColumn: [
        { label: '慰问品活动名称', prop: 'optionName', minWidth: 105 },
        { label: '封面', prop: 'giftImageUrl', minWidth: 75, align: 'center' },
        { label: '描述', prop: 'description', minWidth: 200, showOverflowTooltip: true },
      ],
      tableData: [],
      searchForm: { address: '' },
      addressForm: {
        collectId: null,
        optionId: '',
        materialDetail: '',
        area: '',
        contactAddress: '',
        recipient: '',
        contactInfo: '',
        isMailed: 1,
        logisticsStatus: 1,
      },
      addressFormRules: {
        optionId: [{ required: true, message: '请选择慰问品', trigger: 'change' }],
        recipient: [{ required: true, message: '请输入领取人姓名', trigger: 'change' }],
        contactInfo: [{ required: true, message: '请输入手机号码', trigger: 'change' }],
      },
      cityList: [
        '广州市',
        '深圳市',
        '佛山市',
        '珠海市',
        '江门市',
        '东莞市',
        '汕尾市',
        '惠州市',
        '梅州市',
        '湛江市',
        '阳江市',
        '茂名市',
        '揭阳市',
        '汕头市',
        '潮州市',
        '韶关市',
        '河源市',
        '肇庆市',
        '云浮市',
        '清远市',
        '中山市',
      ],
    };
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    'addressForm.isMailed': {
      handler(newVal) {
        if (newVal) {
          this.addressFormRules.area = [{ required: true, message: '请选择城市或地区', trigger: 'change' }];
          this.addressFormRules.contactAddress = [
            { required: true, message: '请输入详细地址和门牌号', trigger: 'change' },
          ];
        } else {
          delete this.addressFormRules.area;
          delete this.addressFormRules.contactAddress;
        }
      },
      immediate: true,
    },
  },
  created() {
    if (this.$route?.query?.collectId) this.collectId = this.$route.query.collectId;
    this.getData();
  },
  methods: {
    dayjs,
    async getData() {
      try {
        this.dataLoading = true;
        const { data } = await api.getGiftInfo(this.collectId);
        this.collectData = data;
        const res = await api.getGiftOptionList({ collectId: this.collectId });
        this.tableData = res.rows;
        const recordRes = await api.getGiftRecordList({ collectId: this.collectId, userId: this.userId });
        this.isRecord = recordRes.rows.length ? true : false;
        if (this.isRecord) {
          for (const key in recordRes.rows[0]) {
            this.addressForm[key] = recordRes.rows[0][key];
          }
          this.addressForm = recordRes.rows[0];
          this.addressForm.area = this.addressForm.contactAddress.split('市')[0] + '市';
          this.addressForm.contactAddress = this.addressForm.contactAddress.split('市')[1];
        }
        this.dataLoading = false;
      } catch (error) {
        console.log(error);
      }
    },
    submit() {
      this.$refs.addressFormRef.validate((valid) => {
        if (!valid) return;
        const params = { ...this.addressForm };
        params.collectId = this.collectId;
        params.contactAddress = params.area + params.contactAddress;
        params.materialDetail = this.tableData.find((item) => item.optionId == params.optionId).optionName;
        api.addGiftRecord(params).then((res) => {
          this.$message({ message: res.msg, type: 'success' });
          this.$router.push('/condolenceDistribution/index');
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

::v-deep .van-tabs {
  height: 100%;

  .van-tabs__nav {
    background-color: transparent;

    .van-tab {
      font-size: 16px;
      color: #b7b7b7;

      &.van-tab--active {
        color: #323233;
      }
    }

    .van-tabs__line {
      background-color: #165dff;
    }
  }

  .van-tabs__content {
    height: calc(100% - 54px);

    .van-tab__pane {
      height: 100%;
    }
  }
}

.tab-content {
  margin-top: 10px;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.banner {
  flex-shrink: 0;
  width: 100%;
}

.content-item-box {
  flex: 1;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  overflow: auto;

  .item-title {
    flex-shrink: 0;
    border-left: 3px solid #165dff;
    padding-left: 10px;
    margin-bottom: 15px;
  }

  .tip {
    color: #8d8d8d;
    font-size: 14px;
    white-space: pre-wrap;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0px;
    }

    &.description {
      font-size: 15px;
    }

    .label {
      display: inline-block;
      width: 75px;
    }
  }

  .content-box {
    flex: 1;
    overflow: auto;
  }

  .item-list-box {
    flex: 1;
    overflow: auto;
  }

  .introduce-img {
    width: 100%;
  }
}

.type-box {
  flex-shrink: 0;
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  margin-bottom: 25px;

  .type-item {
    padding: 10px 30px;
    border-radius: 20px;
    background: #b4b4b4;
    color: #fff;

    &.active {
      background: #165dff;
    }

    &.isRecord {
      display: none;

      &.active {
        display: block;
      }
    }
  }
}

.search-box {
  flex-shrink: 0;
  margin-bottom: 15px;

  ::v-deep .el-input__inner {
    border-radius: 20px;
  }

  .tip {
    font-size: 14px;
    color: #ff0000;
    margin-top: 10px;
  }
}

.form-box {
  flex: 1;
  overflow: auto;

  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 15px;

      .el-form-item__label {
        padding: 0;
      }
    }

    .el-select {
      width: 100%;
    }
  }
}

.handle-box {
  flex-shrink: 0;
  display: flex;
  justify-content: end;

  .btn {
    padding: 7px 30px;
    border-radius: 20px;
    background-color: #165dff;
    color: #fff;
    cursor: pointer;
  }
}
</style>
